<template>
  <div>
    <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
    background-color="#2c3e50"
  >
    <el-menu-item index="0">
      <div style="color: #fff; font-size: 20px; font-weight: bold;">
        无线网络全生命周期管理系统
      </div>
    </el-menu-item>
    <el-menu-item index="1">
      
      <div>最后更新：{{ time }}</div>
      <el-button type="primary" size="small" @click="updateTime">更新数据</el-button>
    </el-menu-item>
    <!-- <el-menu-item index="1">Processing Center</el-menu-item>
    <el-sub-menu index="2">
      <template #title>Workspace</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu> -->
  </el-menu>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const activeIndex = ref('1')

// 获取当前时间并格式化为指定格式
function getCurrentFormattedTime() {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

const time = ref(getCurrentFormattedTime());
// 更新时间的函数
const updateTime = () => {
  time.value = getCurrentFormattedTime();
};
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}

</script>

<style  scoped>
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}
</style>